<template>
    <div class="d_flex uploadImages">

        <ul class="el-upload-list el-upload-list--picture-card">
            <li class="el-upload-list__item is-success" v-for="vo in image_c" :key="vo">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="vo">
                    <label class="el-upload-list__item-status-label">
                        <el-icon class="el-icon--upload-success el-icon--check"><Check /></el-icon>
                    </label>
                    <i class="el-icon--close-tip">press delete to remove</i>
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="preview(vo)">
                            <el-icon><zoom-in /></el-icon>
                        </span>
                        <span class="el-upload-list__item-delete" @click="remove(vo)">
                            <el-icon><Delete /></el-icon>
                        </span>
                    </span>
                </div>
            </li>
        </ul>

        <el-upload :action="url"
                   style="line-height: normal"
                   accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                   multiple
                   :show-file-list="false"
                   :on-change="change"
                   :on-remove="remove"
                   :on-preview="preview"
                   :on-exceed="exceed"
                   :on-success="success"
                   :on-error="error"
                   :data="params"
        >

            <ul class="el-upload-list el-upload-list--picture-card">
                <li class="el-upload el-upload--picture-card" v-show="image_c?.length<limit">
                    <div>
                        <el-icon><Plus /></el-icon>
                    </div>
                </li>
            </ul>
            <template #tip>
                <el-alert v-if="setData.errMsg!=''" :title="setData.errMsg" type="error" :closable="false" />
            </template>

        </el-upload>

        <el-dialog v-model="setData.dialogVisible">
            <img style="width: 100%" :src="setData.dialogImageUrl" alt=""/>
        </el-dialog>
    </div>


</template>

<script setup lang="ts">
import {reactive, toRefs, computed, getCurrentInstance, ComputedRef} from "vue"
    import tool from "@/utils/tool";
    import {msgError} from "@/utils/alert";

    const props = withDefaults(defineProps<{
        modelValue?: string[],
        limit?: number,
        url?: string,
        params?: any,
    }>(), {
        modelValue: () => [],
        limit: 10,
        url: import.meta.env.VITE_APP_UPLOAD_IMG_URL,
    })

    const emits = defineEmits(["update:modelValue", "onChange"])

    const image_c = computed({
        get: () => {
            return props.modelValue;
        },
        set: (val) => {
            emits("update:modelValue", val)
        }
    })


    const setData : {
        dialogVisible: boolean,
        dialogImageUrl: string,
        errMsg:string,
    } = reactive({
        dialogVisible: false,
        dialogImageUrl: '',
        errMsg:'',
    })

    const remove = (url:string) => {
        // 删除路径
        let uIndex = props.modelValue.indexOf(url)
        props.modelValue.splice(uIndex,1)

    }

    const preview = (url:string) => {
        setData.dialogImageUrl = url
        setData.dialogVisible = true
    }

    const exceed = (files:any,  fileList:any) => {
        msgError(`最多上传${props.limit}张图片`)
    }

    const change = (file:any, fileList:any) => {
        emits("onChange", file, fileList)
    }

    const success = (res:any, file:any, fileList:any) => {
        if(res.error == 0){
            let imgs = props.modelValue
            imgs.push(res.url)
            emits('update:modelValue', imgs)
        }else{
            setData.errMsg = `${res.error}: ${res.msg}`
        }
    }
    const error = (res:any, file:any, fileList:any) => {
        setData.errMsg = "上传失败"
    }
</script>

<style>
.uploadImages .el-upload-list--picture-card .el-upload-list__item, .uploadImages .el-upload--picture-card{
    width: 90px;
    height: 90px;
}
</style>